<template>
	<eui-page-frame :topHeight="230" :withOutBorder="true">
		<template #top>
			<view style='width:auto;height:230rpx;background-color:white;'>
				<eui-nav-bar title='铺位到期预警' backgroundColor='white' color='black' rightIcon='' />
				<!-- 头部多条件查询部分 -->
				<eui-dropdownsearch v-model:menuList="gdsClassList" :themeColor="themeColor" style='height:88rpx'
					:duration="300" :isCeiling="true" @update:menuList="whereList">
				</eui-dropdownsearch>
			</view>
		</template>
		<eui-page-content>
			<scroll-view class="scroll-box" scroll-y :refresher-enabled="true" refresher-threshold="45"
				:refresher-triggered="triggered" refresher-background="none" @scrolltolower="lower"
				@refresherrefresh="onRefresh">
				<view v-for="(item, index) in CounterList" :key="index" @click="openDetail(item)">
					<eui-base-card class="e-basecard" style='position: relative;' title='铺位到期预警' :bottomShow="true">
						<!-- 头部标题部分-->
						<template #header>
							<view
								style=' height:68rpx;margin: 10rpx 10rpx 20rpx 28rpx;display:flex;flex-direction: row;align-items: center;'>
								<view class='titleStyle'>{{ item.c_name }}</view>
								<eui-uicons size='25rpx' style='margin-left: 15rpx;' fontFamily="enjoyIcon5"
									customPrefix="icon-dingwei1" />
								<span class='stitleStyle'
									style='margin-left: 6rpx;'>{{ item.c_building_name }}-{{ item.c_floor_name }}</span>
								<span class='stitleStyle' v-if="item.c_store_id != null && item.c_store_id != ''"
									style='margin-left: auto;'> 机构 - {{ item.c_store_id }}</span>
							</view>
						</template>
						<eui-line></eui-line>
						<eui-base-card style='height:140rpx;padding-top:28rpx;'>
							<template #left>
								<eui-leftdays style='margin-left:8rpx' size='140'
									:number='item.c_diffday'></eui-leftdays>
							</template>
							<eui-detail-show :items="dataItems" :borderBottom="false" v-model="CounterList[index]"
								flex-grow labelWidth="60px" size="small">
							</eui-detail-show>
						</eui-base-card>
						<template #bottom>
							<view style='display:flex;justify-content: center;align-items: center;'>
								<eui-uicons v-if="item.showBottom == false" size='24rpx' fontFamily="enjoyIcon5"
									@click="btnClick(item)"
									style='width:24rpx;height:24rpx;background-color:#F3F3F3;border-radius: 24rpx;margin-right: 28rpx;margin-bottom: 18rpx;'
									customPrefix="icon-jiantouxiangshang" />
								<eui-uicons v-if="item.showBottom == true" size='24rpx' fontFamily="enjoyIcon5"
									@click="btnClick(item)"
									style='width:24rpx;height:24rpx;background-color:#F3F3F3;border-radius: 24rpx;margin-right: 28rpx;margin-bottom: 18rpx;'
									customPrefix="icon-jiantouxiangxia" />
							</view>
						</template>
					</eui-base-card>
					<view v-if='item.showBottom == true'
						style='width:710rpx;margin-top:-48rpx;height:156rpx;border-radius: 20rpx;background-image:linear-gradient(to bottom,#F2F2F2 12%,#FFFFFF  40%);'>
						<view style='padding-top: 40rpx;margin-left:35rpx'>
							<eui-detail-show :borderBottom="false" :items="dataItemsExpand" v-model="CounterList[index]"
								flex-grow labelWidth="60px" size="small"></eui-detail-show>
						</view>
					</view>
				</view>
			</scroll-view>
		</eui-page-content>
	</eui-page-frame>
</template>


<script setup type="ts">

	import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import service from '../../../common/service';
import apps from '@/pages/MainViews/app';
import { getDictName } from '../components/RelatedName.js';
import { getRdsUrl, rdsRequest } from '@/hooks/rdsServices';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
import {useMainStore} from "@/store/modules/store";
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const bgimage =theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_cpw_blue.jpg);":'background-image: url(../../../static/img/rdsImgs/top_cpw_orange.jpg);'
const themeColor = ref(theme._object.theme=='theme-blue'?'#02B7E6':'#FF6430')

const mainStore = useMainStore();
const { loginInfo } = mainStore;

onLoad(() => {
	GetGdsClassData();
})
onShow(() => {
		CounterList.value = [];
	getCounterData(false);

})
const rdsUrl = getRdsUrl();
const dataItems = [
	{
		label: "经营面积",
		prop: "c_use_area",
		type: "text",
		colSpan: 12,
		element: {
		},
	},
	{
		label: "经营业态",
		prop: "c_counter_form_name",
		type: "text",
		colSpan: 12
	},
	{
		label: "合同编号",
		prop: "c_con_no",
		type: "text",
		colSpan: 12
	},
	{
		label: "经营品牌",
		prop: "c_counter_bcode_name",
		type: "text",
		colSpan: 12
	},
	{
		label: "",
		prop: "c_merchant_operation_name",
		type: "tag",
		colSpan: 12,
		labelWidth: '0rpx',
		element: {
			type: "success",
			size: "mini",
			shape: "square",
			plain: true,
		},
	}
]

const dataItemsExpand = [
	{
		label: "目标业态",
		prop: "c_counter_plan_formname",
		type: "text",
		colSpan: 12
	},
	{
		label: "目标品牌",
		prop: "c_plan_bcname",
		type: "text",
		colSpan: 12
	},
	{
		label: "洽谈进程",
		prop: "c_process_name",
		type: "tag",
		colSpan: 24,
		element: {
			type: "success",
			size: "mini",
			shape: "square",
			plain: true,
		},
	}
]

//铺位数据
const CounterList = ref([{
	c_no:'',
	c_building_name:'',
	c_floor_name:'',
	c_use_area:'',
	c_con_no:'',
	c_counter_bcode_name:'',
	c_counter_form:'',
	c_counter_form_name:'',
	c_process_name:'',
	state:'',
	c_store_id:'',
	c_diffday:'0',
	c_merchant:'',
	c_operation:'',
	c_merchant_name:'',
	c_operation_name:'',
	c_counter_plan_form:'',
	c_counter_plan_formname:'',
	c_merchant_operation_name:'',
	c_plan_bcode:'',
	c_plan_bcname:'',
	showBottom:false,
	rowIndex:0,
}]);


//分页处理
const CurrentPage = ref(1);  //第几页
const PageSize = ref(10);  //每页10条
const RowsCount = ref(0);  //总条数
const PageCount = ref(1);  //总页数
const triggered = ref(false);
const freshing = ref(false);
const lower = async () => {
	if (CurrentPage.value < PageCount.value) {
		CurrentPage.value = CurrentPage.value + 1;
		 await getCounterData(true);
	}
}
	const onRefresh = async(e)=> {
		if (freshing.value) return;
		freshing.value = true;
		if (!triggered.value) {//界面下拉触发，triggered可能不是true，要设为true
			triggered.value = true;
			await getCounterData();
		}
		setTimeout(() => {
		triggered.value = false;//触发onRestore，并关闭刷新图标
		freshing.value = false;
		}, 1000)
	}
//获取铺位数据
const getCounterData = async (curPage) => {
	if (!curPage) {
		CurrentPage.value = 1;
	}
	const req = {
		IsNotPage: false,
		CurrentPage: CurrentPage.value,
		PageSize: PageSize.value,
		WhereList: [{
			c_col: "c_store_id",
			c_oper: "等于",
			c_value:loginInfo?.sUserStore,//取当前登录机构
			c_logic: "而且"
		},
		{
			c_col: "c_arrived_month",
			c_oper: "等于",
			c_value: yjday?.value,  //预警日期
			c_logic: "而且"
		},
		{
			c_col: "c_counter_form",
			c_oper: '等于',
			c_value: gdsclass?.value,
			c_logic: '而且'
		}
		],
	};

	uni.showLoading("查询中...");
	const res =
		await rdsRequest(rdsUrl.apiApi, '管易通铺位预警', 'GetCounterWarnData', req, '');
			CurrentPage.value = res.CurrentPage; //第几页
			PageSize.value = res.PageSize; //每页10条
			RowsCount.value = res.RowsCount; //总条数
			PageCount.value = res.PageCount; //总页数
			uni.hideLoading();
			if (res && res.ReturnObject) {
				const useData = (res.ReturnObject??[])?.map(x => {
						return {
							c_no: x.c_no,
							c_name:x?.c_name||'',
							c_building_name: x.c_building_name || '',
							c_floor_name: x.c_floor_name || '',
							c_use_area: x.c_use_area,
							c_con_no: x.c_con_no,
							c_counter_bcode_name: x.c_counter_bcode_name || '',
							c_counter_form: x.c_counter_form || '',
							c_counter_form_name: x.c_counter_form_name || '',
							c_process_name: x.c_process_name || '',
							state: x.c_status,
							c_store_id: x.c_store_id,
							c_diffday:Number(x.c_diffday) > 999 ? '>999': x.c_diffday,
							c_merchant: x.c_merchant,
							c_operation: x.c_operation,
							c_merchant_name: x.c_merchant_name || '',
							c_operation_name: x.c_operation_name || '',
							c_counter_plan_form: x.c_counter_plan_form || '',
							c_counter_plan_formname: x.c_counter_plan_formname || '',
							c_merchant_operation_name: `${x.c_merchant_name},${x.c_operation_name}`,
							c_plan_bcode: x.c_plan_bcode || '',
							c_plan_bcname: x.c_plan_bcname || '',
							showBottom: false,
						}
					});
					
				if (res.CurrentPage == 1) {
					CounterList.value = useData;
				} else {
					CounterList.value = CounterList.value.concat(useData);
				}
			}
}


//这里打开查铺位的明细页

const openDetail = (item) => {
	item.showBottom = item.showBottom ? false : true;
}

//预警日期
const yjday = ref(1);
//经营业态
const gdsclass = ref('0');
const whereList = (newWhereList) => {
	yjday.value = newWhereList[0]?.value;
	gdsclass.value = newWhereList[1]?.value;
	getCounterData();
}

const gdsClassList = ref([]);
//获取查询条件
const GetGdsClassData = async () => {
	const req = { WhereList: [] };
	uni.showLoading("查询中...");
	gdsClassList.value = [
		{
			title: '预警30天',
			type: 'cell',
			value: 1,
			options: [
				{
					label: "预警30天",
					value: 1
				},
				{
					label: "预警60天",
					value: 2
				},
				{
					label: "预警90天",
					value: 3
				},
				{
					label: "预警>90天",
					value: 4
				}
			]
		},
		{
			title: '经营业态',
			type: 'cell',
			value: 0,
			options: [
				{
					label: "全部",
					value: 0
				},
			],
		}
	];
	const res = await rdsRequest(rdsUrl.apiApi, '管易通铺位预警', 'QueryBussinessTypeList', req, '');
	uni.hideLoading();
	if (res && res.ReturnObject) {
		const useData = res.ReturnObject;
		if (useData.length > 0) {
			const data = useData.map(x => {
				return {
					label: x.c_name,
					value: x.c_ccode
				}
			});
			gdsClassList.value[1].options.push(...data);
		}
	}
};

</script>

<style lang="scss">
	@import '../../../uni.scss';
	@import '../../../static/font/enjoyicon5.0/iconfont.css';

	.scroll-box {
		height: 100%;
	}

	.titleStyle {
		font-size: 34rpx;
		font-weight: bold;
		height: 48rpx;
		font-weight: 600;
	}

	.stitleStyle {
		font-size: 26rpx;
		height: 37rpx;
		color: $uni-text-color-grey;
	}

	.e-basecard {
		padding-top: 10rpx;
		margin-top: 20rpx;
		height: 20rpx;
		font-family: 'PingFang SC', sans-serif;
	}
</style>